import './index.css';
import { downloadFile } from '../../api/http';


export const FileList = (props) => {
    let files = props.dataList;

    const downloadClickHandle = async (e, item) => {
        e.preventDefault();
        const res = await downloadFile("/download?fileId=" + item.id);
        console.log(res);
        props.reload();
    }

    const previewClickHandle = (e, item) => {
        e.preventDefault();
        window.open(item.previewUrl, "_blank", "width=800,height=600,left=400,top=300");
    }


    return (
        <table>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>文件名称</td>
                    <td>文件大小（KB）</td>
                    <td>上传时间</td>
                    <td>下载次数</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                {
                    files.map((item, index) => {
                        return (
                            <tr className='table-row' key={index}>
                                <td>{index+1}</td>
                                <td>{item.fileName}</td>
                                <td>{item.fileSize}</td>
                                <td>{item.uploadTime}</td>
                                <td>{item.downloadCount}</td>
                                <td className='table-ope-col'>
                                    <div>
                                        <a href="#" onClick={(e) => downloadClickHandle(e, item)}>下载</a>
                                        <a href="#" style={{color: 'red'}}>删除</a>
                                        <a href="#" onClick={(e) => previewClickHandle(e, item)} style={{color: 'orange'}}>预览</a>
                                    </div>
                                </td>
                            </tr>
                        )
                    })
                }
            </tbody>
        </table>
    )
}